<template>
  <view class="list-page">
    <!-- Tab 切换 -->
    <view class="tabs">
      <view 
        class="tab-item"
        :class="{ active: activeTab === 'hot' }"
        @click="switchTab('hot')"
      >
        热门转盘
      </view>
      <view 
        class="tab-item"
        :class="{ active: activeTab === 'my' }"
        @click="switchTab('my')"
      >
        我的转盘
      </view>
    </view>

    <!-- 转盘列表 -->
    <scroll-view 
      class="list-container" 
      scroll-y
      :show-scrollbar="false"
    >
      <view 
        v-for="item in displayList" 
        :key="item.id"
        class="list-item"
        @click="goToWheel(item)"
      >
        <view class="item-icon">{{ item.icon }}</view>
        <view class="item-content">
          <text class="item-title">{{ item.title }}</text>
        </view>
        <view class="item-actions">
          <view class="action-btn" @click.stop="shareItem(item)">
            <text class="btn-icon">🔗</text>
          </view>
          <view class="action-btn" @click.stop="favoriteItem(item)">
            <text class="btn-icon">{{ item.isFavorite ? '⭐' : '☆' }}</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="displayList.length === 0" class="empty-state">
        <text class="empty-text">暂无转盘</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

/**
 * 当前激活的标签
 */
const activeTab = ref('hot')

/**
 * 热门转盘列表
 */
const hotList = ref([
  { id: 1, icon: '🍕', title: '今天吃什么', isFavorite: false },
  { id: 2, icon: '🍕', title: '今天吃什么', isFavorite: false },
  { id: 3, icon: '🍔', title: '午餐吃什么', isFavorite: false },
  { id: 4, icon: '😋', title: '王者玩什么英雄', isFavorite: false },
  { id: 5, icon: '🌍', title: '去哪玩转盘', isFavorite: true },
  { id: 6, icon: '💡', title: '真心话转盘', isFavorite: false },
  { id: 7, icon: '❓', title: '真心话与大冒险', isFavorite: false },
  { id: 8, icon: '🍔', title: '午餐吃啥', isFavorite: false },
  { id: 9, icon: '', title: '吃啥', isFavorite: false }
])

/**
 * 我的转盘列表
 */
const myList = ref([])

/**
 * 显示的列表
 */
const displayList = computed(() => {
  return activeTab.value === 'hot' ? hotList.value : myList.value
})

/**
 * 切换标签
 * @param {string} tab - 标签名称
 */
const switchTab = (tab) => {
  activeTab.value = tab
}

/**
 * 跳转到转盘页面
 * @param {Object} item - 转盘项
 */
const goToWheel = (item) => {
  uni.switchTab({
    url: '/pages/wheel/index'
  })
}

/**
 * 分享转盘
 * @param {Object} item - 转盘项
 */
const shareItem = (item) => {
  uni.showToast({
    title: '分享功能开发中',
    icon: 'none'
  })
}

/**
 * 收藏/取消收藏
 * @param {Object} item - 转盘项
 */
const favoriteItem = (item) => {
  item.isFavorite = !item.isFavorite
  uni.showToast({
    title: item.isFavorite ? '已收藏' : '已取消收藏',
    icon: 'none'
  })
}
</script>

<style lang="scss" scoped>
.list-page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #F5F5F5;
}

.tabs {
  display: flex;
  background: white;
  border-bottom: 1px solid #E0E0E0;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 30rpx 0;
    font-size: 32rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #3cc51f;
      font-weight: 500;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background: #3cc51f;
        border-radius: 2rpx;
      }
    }
  }
}

.list-container {
  flex: 1;
  padding: 20rpx;
}

.list-item {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .item-icon {
    width: 80rpx;
    height: 80rpx;
    background: linear-gradient(135deg, #FFE5E5 0%, #FFF0E5 100%);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40rpx;
    margin-right: 24rpx;
  }
  
  .item-content {
    flex: 1;
    
    .item-title {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
    }
  }
  
  .item-actions {
    display: flex;
    gap: 20rpx;
    
    .action-btn {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      background: #F5F5F5;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .btn-icon {
        font-size: 32rpx;
      }
    }
  }
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>

